<!--
* @Author: zhangjing
* @Date: 2025-06-05 14:17:16
* @Description: 统计中学生详情=>
-->
<template>
	<div class="answerStu">
		<div class="title">作答人数{{ finishStuNum }}/{{ answerStuList.length }}</div>
		<div class="tablelist">
			<div class="list">
				<div
					class="item"
					:class="{ unknown: !item.answer }"
					v-for="(item, index) in answerStuList"
					:key="index"
					@click="praiseStud(item)"
				>
					<div class="flex flex-pack-justify">
						<span class="name" :title="item.studName">{{ item.studName }}</span>
						<b
							v-if="item.answer"
							:style="{
								color: !isCorrect(item.answer)
									? '#5480DB'
									: isCorrect(item.answer) == '1'
									? '#00BEC5'
									: '#D60000',
							}"
							>{{ item.answer }}</b
						>
						<img v-else src="/impromptu/unknown.png" style="width: 20px; height: 20px" />
					</div>
					<p class="time" v-if="item.answer">所用时间：{{ item.time }}s</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	//作答学生
	name: 'answerStu',
	props: {
		answerStuList: {
			type: Array,
			default: () => [],
		},
		//完成学生数量
		finishStuNum: {
			type: Number,
			default: 0,
		},
		//当前题目信息
		curTopic: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {};
	},
	methods: {
		//判断作答结果是否正确
		isCorrect(answerResult) {
			console.log('单签' + JSON.stringify(this.curTopic));
			let totalanswer = this.curTopic.answer;
			//let totalanswer = this.totalanswerString;
			console.log('有正确答案类型' + typeof totalanswer);
			console.log('有正确答案' + totalanswer);
			console.log('结果类型' + typeof answerResult);
			console.log('结果' + answerResult);
			//判断只有是排行统计页面时才需要处理
			if (this.curTopic.topicType == 5) {
				if (totalanswer || totalanswer == 0) {
					answerResult = parseFloat(answerResult);
					if (totalanswer == answerResult) {
						return '1';
					} else {
						return '0';
					}
				} else {
					return '';
				}
			} else {
				/* else if (this.curTopic.topicType == 1) {
					if (totalanswer && totalanswer.length > 0) {
						totalanswer = totalanswer.join("")
						if (totalanswer == answerResult) {
							return '1'
						} else {
							return '0'
						}
					} else {
						return ''
					}
				} */
				if (totalanswer) {
					if (totalanswer == answerResult) {
						return '1';
					} else {
						return '0';
					}
				} else {
					return '';
				}
			}
		},
		skipPage(type) {
			this.operateType = type;
		},
		praiseStud(info) {
			console.log('praiseStud', info);
			this.$emit('praiseStud', info);
		},
	},
};
</script>

<style lang="less" scoped>
//作答学生
.answerStu {
	.title {
		font-size: 30px;
		font-weight: 700;
		color: #333333;
		padding: 10px 22px;
		text-align: left;
	}

	.tablelist {
		height: calc(100% - 40px);
		overflow: auto;

		.list {
			/* display: grid;
				grid-template-columns: repeat(7, calc((100% - 170px) / 7));
				row-gap: 16px;
				column-gap: 28px;
				line-height: 1;
				padding: 0 22px 40px; */
			display: grid;
			grid-template-columns: repeat(6, calc((100% - 100px) / 6));
			row-gap: 16px;
			column-gap: 20px;
			line-height: 1;
			padding: 0 22px 40px;

			.item {
				background: rgba(84, 128, 219, 0.2);
				border-radius: 6px;
				/* padding: 9px 16px; */
				padding: 9px 10px 0;
				height: 78px;
				position: relative;
				cursor: pointer;
				@media screen and (max-width: 1366px) {
					padding: 9px 10px 0;
				}
				.name {
					color: #5480db;
					font-weight: 700;
					font-size: 20px;
					width: 5em;
					word-wrap: break-word;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					text-align: left;
					height: 42.5px;
				}
				b {
					width: 2em;
					word-wrap: break-word;
					text-align: right;
				}
				.time {
					color: #333333;
					font-weight: 400;
					font-size: 16px;
					margin: 16px 0 8px;
					position: absolute;
					bottom: 0;
					left: 8px;
				}

				&.unknown {
					background: rgba(190, 202, 212, 0.2);
				}
			}
		}
	}
}
</style>
